<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>檢查首爾標籤</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">	
    <link rel="stylesheet" href="./4/lumen/bootstrap.css" media="screen">
    <link rel="stylesheet" href="./_assets/css/custom.min.css">
  </head>
  <body>
  <div class="container">
	<form>
	  <fieldset>
		<legend>檢查首爾標籤</legend>
		<!--button type="button" id="btnNext" class="btn btn-primary">下一箱</button-->
		<div class="form-group row">
		  <label class="col-sm-2 col-form-label" for="inputDefault">目前箱號:</label>
		  <div class="col-sm-10">
		  <input class="form-control" placeholder="17620T4003-7250613" id="box" type="text">
		  </div>
		</div>		
		<div class="form-group row">
		  <label for="staticEmail" class="col-sm-2 col-form-label">卷盤1:</label>
		  <div class="col-sm-10">
			<input readonly="" class="form-control-plaintext" id="disk1" value="" type="text">
		  </div>
		</div>
		<div class="form-group row">
		  <label for="staticEmail" class="col-sm-2 col-form-label">卷盤2:</label>
		  <div class="col-sm-10">
			<input readonly="" class="form-control-plaintext" id="disk2" value="" type="text">
		  </div>
		</div>
		<div class="form-group row">
		  <label for="staticEmail" class="col-sm-2 col-form-label">卷盤3:</label>
		  <div class="col-sm-10">
			<input readonly="" class="form-control-plaintext" id="disk3" value="" type="text">
		  </div>
		</div>
		<div class="form-group row">
		  <label for="staticEmail" class="col-sm-2 col-form-label">卷盤4:</label>
		  <div class="col-sm-10">
			<input readonly="" class="form-control-plaintext" id="disk4" value="" type="text">
		  </div>
		</div>
		
		<div class="form-group row">
		  <label class="col-sm-2 col-form-label" for="inputDefault">目前卷盤:</label>
		  <div class="col-sm-8">
		  <input class="form-control" placeholder="17619T8083-7250613" id="diskNow" type="text">
		  </div>
		  <div class="col-sm-2">
		   <input readonly="" class="form-control-plaintext" id="msg" value="" type="text">
		  </div>
		  
		</div>		
	</form>	
	<p class="lead">
    <a class="btn btn-primary btn-lg" href="index.html" role="button">返回</a>
	</p>
	</div>
    <script src="./_vendor/jquery/dist/jquery.min.js"></script>
    <script src="./_vendor/popper.js/dist/umd/popper.min.js"></script>
    <script src="./_vendor/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="./_assets/js/custom.js"></script>
	<script>
	var disks;
	var cks=new Array(4);
		$("#box").keypress(function(e){    //
		  console.log($("#box").val());
			$(disk1).css('color', 'black');
			$(disk1).val("");
			$(disk2).css('color', 'black');
			$(disk2).val("");
			$(disk3).css('color', 'black');
			$(disk3).val("");
			$(disk4).css('color', 'black');
			$(disk4).val("");
		  var key = e.which;
		  if (key == 13) { 
			$.ajax({ url: "getDisk.php?lot="+$("#box").val(), 
					dataType : "text",
					success: function(data){
					console.log(data);
					disks=data.split(",");
					$(disk1).val(disks[0]);
					$(disk2).val(disks[1]);
					$(disk3).val(disks[2]);
					$(disk4).val(disks[3]);
					(disks[0] == "") ? cks[0]="Y" : cks[0]="N";
					(disks[1] == "") ? cks[1]="Y" : cks[1]="N";
					(disks[2] == "" || disks[2] == undefined ) ? cks[2]="Y" : cks[2]="N";
					(disks[3] == "" || disks[3] == undefined) ? cks[3]="Y" : cks[3]="N";
				  }
				  });		  
		  
			$( "#diskNow" ).focus();
		 }
		});	
		
		$("#diskNow").keypress(function(e){
		  console.log($("#diskNow").val());

		  dk=$("#diskNow").val();
		  var key = e.which;
		  if (key == 13) { 
				if ((dk==disks[0]) || (dk==disks[1])||(dk==disks[2])||(dk==disks[3])){
					if	(dk==disks[0]) {
						$(disk1).css('color', 'green');
						cks[0]="Y" ;
						$("#diskNow").val("");
					}
					if	(dk==disks[1]) {
						$(disk2).css('color', 'green');
						cks[1]="Y" ;
						$("#diskNow").val("");
					}
					if	(dk==disks[2]) {
						$(disk3).css('color', 'green');
						cks[2]="Y" ;
						$("#diskNow").val("");
					}
					if	(dk==disks[3]) {
						$(disk4).css('color', 'green');
						cks[3]="Y" ;
						$("#diskNow").val("");
					}
				
				$(msg).val("驗證通過");
				}else{
					$(msg).val("驗證失敗");
					$("#diskNow").select();
				}
				if (("Y"==cks[0]) && ("Y"==cks[1])&&("Y"==cks[2])&&("Y"==cks[3])){
					$("#box").select();
				}
			}
		  });	
	
			$("#btnNext").click(function(){
				if (("Y"==cks[0]) && ("Y"==cks[1])&&("Y"==cks[2])&&("Y"==cks[3])){
					$(disk1).css('color', 'black');
					$(disk1).val("");
					$(disk2).css('color', 'black');
					$(disk2).val("");
					$(disk3).css('color', 'black');
					$(disk3).val("");
					$(disk4).css('color', 'black');
					$(disk4).val("");
					
					$( "#box" ).val("");
					$( "#box" ).focus();
					
				}
			  
			});	
	</script>
	
	
  </body>
</html>
